<template>
  <li class="item fx-h-c b-c">
    <template v-if="item.isUploadImg">
      <span class="name">{{ item.name }}</span>
      <div class="change-item fx-h-c">
        <img class="br-5" :src='$store.state.user.avatar' alt="" />
        <div class="upload">
          <p>{{ item.desc }}</p>
          <a-upload
            name="avatar"
            class="avatar-uploader"
            action="http://localhost:3002/user/avatar"
            :showUploadList="false"
            method="post"
            :withCredentials="true"
            @change="hangleChange"
          >
            <a-button type="primary"> {{ item.btnWord }} </a-button>
          </a-upload>
        </div>
      </div>
    </template>
    <template v-else>
      <span class="name">{{ item.name }}</span>
      <div class="msg">
        <input
          type="text"
          class="inp"
          v-model="item.val"
          :placeholder="item.placeholder"
          ref="inp"
          @focus="inpFocus"
          @blur="inpBlur"
          @input="inpInput"
        />
      </div>
      <div class="edit fx-h-c">
        <img
          src="https://sf6-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/edit-icon.6d6382b.svg"
          alt=""
          v-if="!isEdit"
        />
        <span class="save cs" @click="save" v-else>保存</span>
        <span class="w cs" :class="{ isEdit: isEdit }" @click="edit">修改</span>
      </div>
    </template>
  </li>
</template>

<script>
import { getUserDetail } from "@/api/user";
import { getSessionStorage, parse } from "@/utils/utils";
export default {
  name: "CItem",
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      isEdit: false,
      isLock: false,
      isSave: false,
      user: [],
    };
  },
  watch: {
    isLock(lock) {
      if (!lock) {
        let val = this.item.rawVal;
        if (this.isSave) {
          val = this.item.val;
        }
        this.$emit("changeVal", val, this.item.id);
      }
    },
  },
  async created() {
    const {id} = parse(getSessionStorage("cid"));
    const result = await getUserDetail(id);
    this.user = result.data;
  },
  methods: {
    hangleChange(data) {
      const response = data.file.response;
      if (response) {
        if (response.code == -1) {
          this.$message.error("上传失败");
        } else {
          this.$store.commit("changeAvatar", response);
        }
      }
    },
    edit() {
      // 如果当前是编辑状态，要更改文编辑状态，也得更改锁
      if (this.isEdit) this.isLock = false;
      // 当前为编辑状态
      this.isEdit = !this.isEdit;
      if (this.isEdit) this.$refs.inp.focus();
    },
    inpBlur() {
      // 没锁住，才能修改编辑状态
      if (!this.isLock) this.isEdit = false;
    },
    inpFocus() {
      if (!this.isEdit && !this.isLock) {
        this.isEdit = true;
      }
    },
    inpInput() {
      this.isLock = true;
    },
    save() {
      this.$emit("changeName", this.item.val, this.item.id);
      this.isLock = false;
      this.isEdit = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  justify-content: space-between;
  .change-item {
    width: 72rem;
    padding: 2rem 0;
    img {
      height: 7rem;
      width: 7rem;
      margin-right: 2rem;
    }
  }
  .msg {
    padding: 2rem;
    input {
      height: 4rem;
      width: 55rem;
      color: #909090;
      &::placeholder {
        color: #909090;
      }
    }
  }
  .edit {
    width: 8rem;
    img {
      margin-right: 0.3rem;
    }
    color: #007fff;
  }
  .save {
    margin-right: 1rem;
  }
  .w.isEdit {
    color: #666;
  }
  .name {
    width: 8rem;
  }
}
</style>